
<!DOCTYPE html>
<html lang="zh-cn">
    <head>
        <meta charset="utf-8">
        <title>浏览页面</title>
        <link rel="stylesheet" href="/app/admin/component/pear/css/pear.css" />
        <link rel="stylesheet" href="/app/admin/admin/css/reset.css" />
        <style>
            audio {
                width: 300px;
                height: 40px;
            }
        </style>
    </head>
    <body class="pear-container">
    
        <!-- 顶部查询表单 -->
        <div class="layui-card">
            <div class="layui-card-body">
                <form class="layui-form top-search-from">
                    <div class="layui-form-item">
                        <label class="layui-form-label">用户编号</label>
                        <div class="layui-input-block">
                            <div class="layui-input-block">
                                <input type="text" autocomplete="off" name="user_sn" class="layui-input">
                            </div>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">类型</label>
                        <div class="layui-input-block">
                            <div name="type" id="type" value="" ></div>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">方式</label>
                        <div class="layui-input-block">
                            <div name="way" id="way" value="" ></div>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">添加时间</label>
                        <div class="layui-input-block">
                            <div class="layui-input-block" id="created_at">
                                <input type="text" autocomplete="off" name="created_at[]" id="created_at-date-start" class="layui-input inline-block" placeholder="开始时间">
                                -
                                <input type="text" autocomplete="off" name="created_at[]" id="created_at-date-end" class="layui-input inline-block" placeholder="结束时间">
                            </div>
                        </div>
                    </div>
                    <div class="layui-form-item layui-inline">
                        <label class="layui-form-label"></label>
                        <button class="pear-btn pear-btn-md pear-btn-primary" lay-submit lay-filter="table-query">
                            <i class="layui-icon layui-icon-search"></i>查询
                        </button>
                        <button type="reset" class="pear-btn pear-btn-md" lay-submit lay-filter="table-reset">
                            <i class="layui-icon layui-icon-refresh"></i>重置
                        </button>
                    </div>
                    <div class="toggle-btn">
                        <a class="layui-hide">展开<i class="layui-icon layui-icon-down"></i></a>
                        <a class="layui-hide">收起<i class="layui-icon layui-icon-up"></i></a>
                    </div>
                </form>
            </div>
        </div>
        
        <!-- 数据表格 -->
        <div class="layui-card">
            <div class="layui-card-body">
                <table id="data-table" lay-filter="data-table"></table>
            </div>
        </div>

        <script src="/app/admin/component/layui/layui.js?v=2.8.12"></script>
        <script src="/app/admin/component/pear/pear.js"></script>
        <script src="/app/admin/admin/js/permission.js"></script>
        <script src="/app/admin/admin/js/common.js"></script>
        <script src="/app/admin/admin/js/functions.js"></script>
        <script src="/app/admin/admin/js/md5.js"></script>
        
        <script>

            let user_sn = layui.url().search['user_sn']??'';
            let type = layui.url().search['type']??0;

            // 相关常量
            const PRIMARY_KEY = "id";
            const SELECT_API = "/app/admin/user/point/select"+ location.search;
            const UPDATE_API = "/app/admin/user/point/update";

            let where = {};
            if(user_sn) where['user_sn'] = user_sn;
            if(type) where['type'] = type;

            layui.$('input[name="user_sn"]').val(user_sn);

            // 字段 添加时间 created_at
            layui.use(["laydate"], function() {
                layui.laydate.render({
                    elem: "#created_at",
                    range: ["#created_at-date-start", "#created_at-date-end"],
                    type: "datetime",
                    mark: date_today_mark,
                });
            })

            // 字段 状态 type
            layui.use(["jquery", "xmSelect"], function() {
                layui.xmSelect.render({
                    el: "#type",
                    name: "type",
                    filterable: true,
                    initValue: [type],
                    data: [{"value":"1","name":"会员点数"},{"value":"2","name":"永久点数"},{"value":"3","name":"体验会员点数"}],
                    model: {"icon":"hidden","label":{"type":"text"}},
                    clickClose: true,
                    radio: true
                })
            });

            // 字段 状态 way
            layui.use(["jquery", "xmSelect"], function() {
                layui.xmSelect.render({
                    el: "#way",
                    name: "way",
                    filterable: true,
                    initValue: [],
                    data: [{"value":"1","name":"新增"},{"value":"2","name":"消费"}],
                    model: {"icon":"hidden","label":{"type":"text"}},
                    clickClose: true,
                    radio: true
                })
            });

            // 表格渲染
            layui.use(["table", "form", "common", "popup", "util"], function() {
                let table = layui.table;
                let form = layui.form;
                $ = layui.$;
                let common = layui.common;
                let util = layui.util;
                
				// 表头参数
				let cols = [
					{
						title: "ID",align: "center", field: "id",width:100,sort:true,
					},{
						title: "用户编号",align: "center", field: "user_sn",width:120,sort:true,
					},{
						title: "类型",align: "center", field: "type",width:120,sort:true, templet: function (d) {
						    if(d.type==1){
                                return '<span style="color: #0e84ec;">会员点数</span>';
                            }else if(d.type==2){
                                return '<span style="color: #2dc26b;">永久点数</span>';
                            }else if(d.type==3){
                                return '<span style="color: #3de5ce;">体验会员点数</span>';
                            }
                        }
					},{
						title: "类型",align: "center", field: "way",width:120,sort:true, templet: function (d) {
						    if(d.way==1){
                                return '<span style="color: #0e84ec;">新增</span>';
                            }else if(d.way==2){
                                return '<span style="color: red;">消费</span>';
                            }
                        }
					},{
						title: "流水点数",align: "center", field: "nums",sort:true,width:120
					},{
						title: "流水对象",align: "center", field: "name",
					},{
                        title: "添加时间",align: "center", field: "created_at",width: 180,
                    }
				];
				
				// 渲染表格
				table.render({
				    elem: "#data-table",
				    url: SELECT_API,
				    page: true,
                    headers: get_header(where),
				    cols: [cols],
				    skin: "line",
				    size: "lg",
				    toolbar: "#table-toolbar",
				    autoSort: false,
				    defaultToolbar: [{
				        title: "刷新",
				        layEvent: "refresh",
				        icon: "layui-icon-refresh",
				    }, "filter", "print", "exports"],
				    done: function () {
				        layer.photos({photos: 'div[lay-id="data-table"]', anim: 5});
				    }
				});

                // 表格顶部搜索事件
                form.on("submit(table-query)", function(data) {
                    where = searchWhere(data.field);
                    table.reload("data-table", {
                        page: {
                            curr: 1
                        },
                        where: where,
                        headers: get_header(where)
                    })
                    return false;
                });
                
                // 表格顶部搜索重置事件
                form.on("submit(table-reset)", function(data) {
                    where = {};
                    table.reload("data-table", {
                        where: where,
                        headers: get_header(where)
                    })
                });

                // 表格排序事件
                table.on("sort(data-table)", function(obj){
                    where.field=obj.field;
                    where.order=obj.type;
                    table.reload("data-table", {
                        initSort: obj,
                        scrollPos: "fixed",
                        where: where,
                        headers: get_header(where)
                    });
                });

                // 刷新表格数据
                window.refreshTable = function(param) {
                    table.reloadData("data-table", {
                        scrollPos: "fixed"
                    });
                }
            })

        </script>
    </body>
</html>
